<template>
	<view>
		<uni-forms ref="form" :rules="rules">
			<view class="item">
				<uni-forms-item label="收货人" name="contact">
					<uni-easyinput @blur="handleBlurContact" v-model="address.contact" placeholder="请输入收货人姓名" />
				</uni-forms-item>
			</view>
			<view class="item">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" @blur="handleBlurPhone" v-model="address.phone"
						placeholder="请输入收货人电话号码" />
				</uni-forms-item>
			</view>
			<view class="item" @click="selectArea">
				<uni-forms-item label="所在地区" name="area">
					<view class="area-box">
						<!-- <input type="text" class="area" :value="prCiAr" /> -->
						<view class="pca area">
							{{prCiAr}}
						</view>
						<image src="/static/icons/my_data_rightarrow@3x.png" class="select-area"></image>
					</view>
				</uni-forms-item>
			</view>
			<view class="item">
				<uni-forms-item label="详细地址 " name="address">
					<uni-easyinput @blur="handleBlurAddr" v-model="address.address" placeholder="如道路、门牌号、小区、楼栋号等" />
				</uni-forms-item>
			</view>
		</uni-forms>

		<pcaPicker ref="pcaPicker" @confirm="getPCA($event)"></pcaPicker>

		<view class="gap">
		</view>

		<view class="set-default">
			<text>设为默认地址</text>
			<switch color="#D80E0E" @change="changeStatus" />
		</view>

		<button type="warn" class="save" @click="saveAddress">保存</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import pcaPicker from '../zz-pcaPicker_1.0.0/components/pcaPicker/pcaPicker.vue'
	import {
		checkMobile
	} from '@/common/utils.js'
	export default {
		components: {
			pcaPicker
		},
		data() {
			return {
				rules: {
					contact: {
						rules: [{
								required: true,
								errorMessage: '请输入收货人姓名',
							},
							{
								minLength: 1,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入11位手机号!',
							}
						]
					},
					prCiAr: {
						rules: [{
								required: true,
								errorMessage: '请选择地区',
							},
							{
								errorMessage: '请选择地区',
							}
						]
					},
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入具体地址!',
							},
							{
								errorMessage: '请输入具体地址!',
							}
						]
					},
				},
				prCiAr: '',
				address: {
					userId: '',
					province: '',
					city: '',
					area: '',
					address: '',
					contact: '',
					phone: '',
					isDefault: '0'
				}
			};
		},
		onLoad() {
			// console.log(this.userInfo._id)
			this.address.userId = this.userInfo._id
		},
		methods: {
			...mapMutations('m_user', ['saveAddressToStorage']),
			// 三级联动
			selectArea() {
				console.log('show')
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {
				console.log(e.province + e.city + e.area);
				this.address.province = e.province
				this.address.city = e.city
				this.address.area = e.area
				this.prCiAr = (e.province + e.city + e.area)
			},
			// 默认地址是否选中
			changeStatus(e) {
				console.log(e.detail.value)
				// this.address.isDefault = e.detail.value
				if (e.detail.value == true) {
					this.address.isDefault = '1'
				} else {
					this.address.isDefault = '0'
				}
			},
			handleBlurPhone() {
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				// 手机号码校验
				if (!myreg.test(this.address.phone)) {
					uni.$showMsg('请输入正确的手机号!')
				}
			},
			handleBlurContact() {
			},
			handleBlurAddr() {},
			// 保存地址
			async saveAddress() {
				let reg_tel =
					/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!reg_tel.test(this.address.phone)) {
					uni.$showMsg('请检查手机号!')
					return
				} else if (this.address.province==''||this.address.contact==''||this.address.address=='') {
					uni.$showMsg('请将信息填写完整!')
					return
				} else {
					const {
						data: res
					} = await uni.$http.post('/cart/addAddress', this.address)
					console.log(res)
					if (res.success === 0) uni.$showMsg('地址添加成功!')
					uni.navigateBack({
						delta: 0
					})
				}
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.pca {
		line-height: 103rpx;
		text-align: right;
	}

	.save {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		width: 702rpx;
		height: 98rpx;
		background: #D80E0E;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item {
		padding: 0 24rpx;
		height: 103rpx;
		border-bottom: 1rpx solid #f0f0f0;
		// padding-top: 10rpx;
		box-sizing: border-box;
		position: relative;
	}


	.select-area {
		width: 15rpx;
		height: 28rpx;
		position: absolute;
		right: 0;
		bottom: 38rpx;
	}

	.area-box {
		width: 60rpx;
		height: 100%;
		line-height: 36px;

		.area {
			width: 500rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #999;
			font-size: 26rpx;
			height: 100%;
			// line-height: 36px;
			text-align: right;
		}
	}

	.gap {
		height: 60rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.set-default {
		height: 104rpx;
		line-height: 104rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 25rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
	}
</style>
